<template>
    <div class="right-pagination">
        <el-pagination
            ref="pagination"
            @size-change="handleCurrentChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="10"
            layout="sizes, prev, pager, next, jumper"
            :total="totalCount"
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    props: {
        // 当前可以显示的数据总量
        totalCount: {
            type: Number
        }
    },
    data() {
        return {
            currentPage: 1
        }
    },
    methods: {
        /** 改变请求的页数显示、切换页面
         * 当前页内显示数：internalPageSize
         * 当前页数：internalPageCount
         */
        handleCurrentChange() {
            this.$emit('changeData', {
                pageNo: this.$refs.pagination.internalCurrentPage,
                pageSize: this.$refs.pagination.internalPageSize
            })
        }
    }
}
</script>

<style lang="less" scoped>
.right-pagination {
    padding: 24px 30px;
    display: flex;
    justify-content: flex-end;
}
</style>
